<template>
    <div class="app-container" ref="appcontainer">
        <div class="inner">
            <p class="product-tip">上门预约基础信息</p>
        <div class="product-list">
            <p class="product__label">产品名：</p>
            <p class="product__input">{{detail.productName}}</p>
        </div>
        <div class="product-list">
            <p class="product__label">订单金额：</p>
            <p class="product__input">{{detail.totalPrice}}</p>
        </div>
        <div class="product-list">
            <p class="product__label">付款金额：</p>
            <p class="product__input">{{detail.payPrice}}</p>
        </div>
        <div class="product-list">
            <p class="product__label">付款时间：</p>
            <p class="product__input">{{detail.payTime}}</p>
        </div>
        <div class="product-list">
            <p class="product__label">状态：</p>
            <p class="product__input">{{detail.orderState == 'wait_pay' ? '待付款' : detail.orderState == 'wait_use' ? '待使用' : '已使用'}}</p>
        </div>
        <div class="product-list">
            <p class="product__label">核销码：</p>
            <p class="product__input">{{detail.verifyCode}}</p>
        </div>
        <div class="product-list">
            <p class="product__label">核销二维码：</p>
            <img :src="detail.verifyCodeImg" class="product-list__codeimg">
            <!-- <p class="product__input">{{detail.verifyCode}}</p> -->
        </div>
        <p class="product-tip">上门预约详情</p>
        <div class="product-list">
            <p class="product__label">等级：</p>
            <p class="product__input">{{ detail.storeDoorserverProduct.grade }}</p>
        </div>
        <div class="product-list">
            <p class="product__label">上门日期：</p>
            <p class="product__input">{{ detail.storeDoorserverProduct.appointmentTime }}</p>
        </div>
        <div class="product-list">
            <p class="product__label">上门时间：</p>
            <p class="product__input">{{ detail.storeDoorserverProduct.timeFrame }}</p>
        </div>
        <div class="product-list">
            <p class="product__label">地址：</p>
            <p class="product__input">{{ detail.storeDoorserverProduct.province }}{{detail.storeDoorserverProduct.city}}{{detail.storeDoorserverProduct.area}}{{detail.storeDoorserverProduct.address}}</p>
        </div>
        <div class="product-list">
            <p class="product__label">联系人：</p>
            <p class="product__input">{{ detail.storeDoorserverProduct.contacts }}</p>
        </div>
        <div class="product-list">
            <p class="product__label">手机号：</p>
            <p class="product__input">{{ detail.storeDoorserverProduct.mobile }}</p>
        </div>
        <div class="product-list">
            <p class="product__label">参考图片：</p>
            <div class="product-imglist">
                <div v-for="(imageUrl, index) in imgList" :key="index" class="imglist">
                <!-- 使用el-image组件显示图片 -->
                <el-image
                    style="width: 100px; height: 100px"
                    :src="imageUrl"
                    :preview-src-list="imgList"
                ></el-image>
                </div>
                <!-- <img :src="item" v-for="(item,index) in imgList" :key="index" class="imglist" > -->
            </div>
        </div>
        <div class="product-list">
            <p class="product__label">服务细节：</p>
            <p class="product__input">{{ detail.storeDoorserverProduct.service}}</p>
        </div>
        <div class="product-list">
            <p class="product__label">备注：</p>
            <p class="product__input">{{ detail.storeDoorserverProduct.remark }}</p>
        </div>
        </div>
    </div>
</template>
<script>
import { appointmentDetail } from "@/api/store/store"
export default {
    data() {
        return {
            detail: {},
            imgList: []
        }       
    },
    created() {
        appointmentDetail({id: this.$route.query.id}).then(res => {
            this.detail = res.data.data
            this.imgList = res.data.data.storeDoorserverProduct.imageList.split(',')
            console.log(this.imgList)
        })  
        this.calHeight();
    },
    methods: {
        calHeight() {
            this.$nextTick(() => {
                const rect = this.$refs.appcontainer.getBoundingClientRect();
                // let height = this.$refs.queryForm.$el.offsetHeight;
                this.tableHeight = rect.height - 120;
            });
        },
    }
}
</script>
<style scoped>
.app-container {
    overflow-y: auto;
    background-color: #efefef;
}
.inner {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 10px 20px;
}
.product-list {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.product-list p {
    margin: 0;
}
.product__label {
    width: 120px;
    font-size: 16px;
    color: #333333;
    padding-right: 10px;
    box-sizing: border-box;
    text-align: right;
}
.product__input {
    font-size: 16px;
    color: #333333;
}
.product-list__codeimg {
    display: block;
    width: 120px;
}
.product-tip {
    font-size: 20px;
    font-weight: bold;
}
.product-imglist {
    display: flex;
    flex-wrap: wrap;
}
.imglist {
    width: 120px;
    height: 120px;
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>